<template>
    <master :title="title">
        <listpage ref="listpage"></listpage>
        <modal :confirm-box-style="contentStyle" title="新增内容" :visible="show">
            这是一个自定义内容弹出框
        </modal>

        <!-- vis关系图基础展示 -->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="90%" :before-close="handleClose">
            <span>
                <!-- vis关系图基础展示 -->
                <div>
                    <!--width,height 画布的宽度，高度。 可以是百分比或像素，一般在dom元素上设置 -->
                    <div id="network_id" class="network" style="width:100%; height:60vh;border:1px solid #ccc;"></div>
                </div>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

    </master>
</template>
<script type="text/javascript">
    (function (G) {
        var _this = null;
        G.vue({
            "usingComponents": {///引入组件
                "master": "/components/Master/Master",///母版组件
                "listpage": "/components/List/Page/Page",///通用列表组件
                "modal": "/components/Modal/Modal"
            },
            "enablePullDownRefresh": true
        }, G.modelList({///配置listpage组件
            modelName: 'sp_course',///entity名称
            title: '课程列表',
            listPage(list, query) {///query为前一个页面传过来的参数
                let type = query.type
                // list.getUrl = '/api/model/v_course?join=user';///列表请求API
                list.getUrl = '/api/model/sp_course';///列表请求API
                if (query.type) list.getUrl += '&type=' + query.type
                list.searchKey = 'title,createTime,createTimeEND'///搜索字段，来源于列表数据模型
                list.models.createTime = {
                    label: '发布时间',
                    unList: true,
                    type: 'datetime'
                }
                list.models.createTimeEND = {
                    label: '结束时间',
                    unList: true,
                    type: 'datetime'
                }
                list.actions.detail1 = {///定义操作按钮，默认存在修改和删除
                    name: '知识图谱',///按钮名称
                    action(event) {///点击回调
                        console.log("知识图谱", event);
                        // log("_this.dialogVisible", _this.dialogVisible);
                        _this.dialogVisible = true;
                        _this.getNetList();
                        _this.init();
                    }
                }
            },
            modeleditquery(edit, event, query) {///编辑页面 edit对象，event事件，query前一个页面传过来的参数
                if (query.type) {
                    edit.values.type = query.type
                    edit.models.type.type = ''
                }
                edit.models.createTime.type = ''
                edit.models.createTimeEND.type = ''
            }
        }, {
            data: {
                contentStyle: '',
                show: false,
                /* 11111111111111111111vis知识图谱1111111111111111111111 */
                nodes: [],
                edges: [],
                // network:null,
                container: null,
                //   节点数组
                nodesArray: [
                    {
                        id: 0,
                        name: "小明小明小明小明小明小明小明小明小明小明小明小明小明小明小明小明小明小明小明小明小明小明小明小明小明小明小明",
                        group: "1",
                    },
                    {
                        id: 1,
                        name: "大立大立大立大立大立大立大立大立大立大立大立大立大立大立大立大立大立大立大立大立大立大立大立大立大立大立大立大立大立大立大立大立大立大立",
                        group: "1",
                    },
                    {
                        id: 2,
                        name: "珊珊",
                        group: "1",
                    },
                    {
                        id: 3,
                        name: "旺旺",
                        group: "animal",
                    },
                    {
                        id: 4,
                        name: "咕咕",
                        group: "animal",
                    },
                ],
                //   关系线数组
                edgesArray: [
                    { id: "e1", from: 0, to: 3, label: "宠物" },
                    { id: "e2", from: 1, to: 4, label: "宠物" },
                    { id: "e3", from: 0, to: 1, label: "好朋友" },
                    { id: "e4", from: 1, to: 2, label: "好朋友" },
                ],
                options: {},
                datas: {},
                dialogVisible: false,
                /* 11111111111111111111vis知识图谱1111111111111111111111 */
            },
            methods: {
                // 初始化network
                init() {
                    this.$nextTick(() => {
                        //1.创建一个nodes对象，用于存储网络拓扑图中的节点数据
                        this.nodes = new vis.DataSet([]);
                        //2.创建一个edges对象，用于存储网络拓扑图中的边（连线）数据
                        this.edges = new vis.DataSet([]);
                        // 3.创建一个网络拓扑图
                        this.container = document.getElementById("network_id");
                        // 4.创建datas对象
                        this.datas = {
                            nodes: this.nodes,
                            edges: this.edges,
                        };
                        // 5.全局配置
                        this.options = {
                            autoResize: true, //网络将自动检测其容器的大小调整，并相应地重绘自身，若为true，则会自动调整大小
                            locale: "cn", //语言设置：工具栏显示中文
                            //设置语言
                            locales: {
                                cn: {
                                    //工具栏中文翻译
                                    edit: "编辑",
                                    del: "删除当前节点或关系",
                                    back: "返回",
                                    addNode: "添加节点",
                                    addEdge: "添加连线",
                                    editNode: "编辑节点",
                                    editEdge: "编辑连线",
                                    addDescription: "点击空白处可添加节点",
                                    edgeDescription: "点击某个节点拖拽连线可连接另一个节点",
                                    editEdgeDescription: "可拖拽连线改变关系",
                                    createEdgeError: "无法将边连接到集群",
                                    deleteClusterError: "无法删除集群.",
                                    editClusterError: "无法编辑群集'",
                                },
                            },
                            configure: {
                                enabled: false,
                                filter: "nodes,edges",
                                container: this.container,
                                showButton: true,
                            },
                            // 组模块
                            groups: {
                                useDefaultGroups: true,
                                myGroupId: {},
                                1: {
                                    shape: "circle",
                                    color: { background: "#78e08f" },
                                    font: { color: "white" },
                                },
                                2: {
                                    shape: "circle",
                                    color: { background: "#69c4ff" },
                                    font: { color: "white" },
                                },
                                3: {
                                    shape: "circle",
                                    color: { background: "#a7d3f5" },
                                    font: { color: "white" },
                                },
                                4: {
                                    shape: "circle",
                                    color: { background: "#f9c3d3" },
                                    font: { color: "white" },
                                },
                                5: {
                                    shape: "circle",
                                    color: { background: "#ff8c94" },
                                    font: { color: "white" },
                                },
                                6: {
                                    shape: "circle",
                                    color: { background: "#ff6b6b" },
                                    font: { color: "white" },
                                }
                            },
                            // 设置节点样式
                            nodes: {
                                shape: "ellipse", //节点的外观。为circle时label显示在节点内，为dot时label显示在节点下方
                                size: 30, //节点的大小，
                                shadow: false, //如果为true，则节点使用默认设置投射阴影。
                                font: {
                                    //字体配置
                                    size: 20,
                                    color: "rgb(117, 218, 167)",
                                    align: "center",
                                },
                                color: {
                                    border: "transparent", //节点边框颜色
                                    background: "#fd91b7", //节点背景颜色
                                    highlight: {
                                        //节点选中时状态颜色
                                        border: "rgb(117, 218, 167)",
                                        background: "rgb(117, 218, 167)",
                                    },
                                    hover: {
                                        //节点鼠标滑过时状态颜色
                                        border: "#dff9fb",
                                        background: "#88dab1",
                                    },
                                },
                                margin: 5, //当形状设置为box、circle、database、icon、text；label的边距
                                widthConstraint: 100, //设置数字，将节点的最小和最大宽度设为该值,当值设为很小的时候，label会换行，节点会保持一个最小值，里边的内容会换行
                                borderWidth: 1, //节点边框宽度，单位为px
                                borderWidthSelected: 3, //节点被选中时边框的宽度，单位为px
                                labelHighlightBold: false, //确定选择节点时标签是否变为粗体
                            },
                            edges: {
                                width: 1,
                                length: 200,// 原始的连线长度（后续会根据不同组间的设置覆盖）
                                color: {
                                    color: "#848499",
                                    highlight: "rgb(117, 218, 167)",
                                    hover: "#88dab1",
                                    inherit: "from",
                                    opacity: 1.0,
                                },
                                font: {
                                    color: "#343434",
                                    size: 18, // px
                                    face: "arial",
                                    background: "none",
                                    strokeWidth: 2, // px
                                    strokeColor: "#ffffff",
                                    align: "horizontal",
                                    multi: false,
                                    vadjust: 0,
                                    bold: {
                                        color: "#343434",
                                        size: 14, // px
                                        face: "arial",
                                        vadjust: 0,
                                        mod: "bold",
                                    },
                                    ital: {
                                        color: "#343434",
                                        size: 14, // px
                                        face: "arial",
                                        vadjust: 0,
                                        mod: "italic",
                                    },
                                    boldital: {
                                        color: "#343434",
                                        size: 14, // px
                                        face: "arial",
                                        vadjust: 0,
                                        mod: "bold italic",
                                    },
                                    mono: {
                                        color: "#343434",
                                        size: 15, // px
                                        face: "courier new",
                                        vadjust: 2,
                                        mod: "",
                                    },
                                },
                                shadow: false,
                                smooth: {
                                    enabled: true,
                                },
                                arrows: { to: true }, //箭头指向to
                            },
                            // 布局
                            layout: {
                                randomSeed: 1, //配置每次生成的节点位置都一样，参数为数字1、2等
                            },
                            //物理引擎-计算节点之前斥力，进行自动排列的属性
                            physics: {
                                enabled: true,
                                barnesHut: {
                                    gravitationalConstant: -4000,
                                    centralGravity: 0.3,
                                    springLength: 120,
                                    springConstant: 0.04,
                                    damping: 0.09,
                                    avoidOverlap: 0,
                                },
                            },
                            //用于所有用户与网络的交互。处理鼠标和触摸事件以及导航按钮和弹出窗口
                            interaction: {
                                hover: true,
                                dragNodes: true, //是否能拖动节点
                                dragView: true, //是否能拖动画布
                                hover: true, //鼠标移过后加粗该节点和连接线
                                multiselect: true, //按 ctrl 多选
                                selectable: true, //是否可以点击选择
                                selectConnectedEdges: true, //选择节点后是否显示连接线
                                hoverConnectedEdges: true, //鼠标滑动节点后是否显示连接线
                                hideEdgesOnDrag: true, //拖动视图时不会绘制边
                                zoomView: true, //是否能缩放画布
                            },
                        };
                        // 6.初始化网络拓扑图
                        this.network = new vis.Network(this.container, this.datas, this.options);
                        this.network.moveTo({ scale: 0.8 });
                    });
                },
                //扩展节点 增加nodes和edges集合参数
                addNetworkParams(param) {
                    //添加节点
                    for (var i = 0; i < param.nodes.length; i++) {
                        var node = param.nodes[i];
                        this.nodes.add({
                            label: node.name,
                            size:node.size,
                            ...node,
                        });
                    }
                    //添加关系
                    for (var i = 0; i < param.edges.length; i++) {
                        var edge = param.edges[i];
                        this.edges.add({
                            ...edge,
                        });
                    }
                },
                handleClose(done) {
                    this.$confirm('确认关闭？')
                        .then(_ => {
                            done();
                        })
                        .catch(_ => { });
                },
                //获取数据
                getNetList() {
                    G.get('{JAVAURL}/sp-chapter/list1').then((res) => {
                        console.log("getNetList(res)", res);
                        // 清空数组，避免重复添加
                        this.nodesArray = [];
                        this.edgesArray = [];

                        // 遍历数据生成节点数组
                        res.data.forEach(item => {
                            this.nodesArray.push({
                                id: item.id,
                                label: item.name,
                                group: item.type,
                                size: item.type == 1 ? 80 :
                                 item.type == 0 ? 80 :
                                    item.type == 2 ? 70 :
                                        item.type == 3 ? 60 :
                                            item.type == 4 ? 50 :
                                                item.type == 5 ? 40 : 30, // 默认值
                            });
                        });
                        
                        // 遍历数据生成关系数组
                        res.data.forEach(item => {
                            if (item.parentId) { // 确保 parentId 存在
                                this.edgesArray.push({
                                    from: item.id,
                                    to: item.parentId,
                                });
                            }
                        });

                        var param = { nodes: this.nodesArray, edges: this.edgesArray };
                        this.addNetworkParams(param);
                    });
                },
            },
            mounted: function (query) {
                _this = this
            }
        }));
    })(Y)
</script>
<style scoped></style>